<template>
	<s-page custom-class="Popup-Page">
		<view>
			<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :show-seconds="true"
				@confirm="ed" @cancel="ed" format="yyyy-mm-dd hh:ii:ss" />
			<view class="room-title">
				<text>房间号:{{cname}}</text>
			</view>
			<form @submit="submitR">
				<view class="must-input">
					<view class="version-box">
						<text style="margin-left: 24rpx;"><text class="must-stars">*</text>月度费用配置:</text>
						<view>
							<uni-data-picker id="version-picker" :localdata="versions" popup-title="请选择月度费用配置"
								@change="onchange" @nodeclick="onnodeclick">
							</uni-data-picker>
						</view>
						<text style="color: #ff007f;">{{tips}}</text>
					</view>
					<hr style="solid #00ff00;margin:0 24rpx;background: #c1c2c1;height: 1rpx;;border: none">
					<view class="version-box">
						<text style="margin-left: 24rpx;"><text class="must-stars">*</text>类型:</text>
						<view>
							<uni-data-picker id="version-picker" :localdata="dicDataList" popup-title="请选择抄表类型"
								@change="onchanges" @nodeclick="onnodeclick">
							</uni-data-picker>
						</view>
						<text style="color: #ff007f;">{{tips}}</text>
					</view>
					<view class="meter-month" @click="DatePicker('datetime')">
						<text style="position: relative; margin-left: 24rpx;"><text
								class="must-stars">*</text>抄表时间:</text>
						<text style="font-size: 26rpx;margin-left: 20rpx;">{{datetime}}</text>
						<text style="position: absolute;left: 420rpx;color: #ff007f;">{{tips1}}</text>
					</view>
					<view class="meter-deadline" @click="DatePicker('Ddatetime')" style="position: relative;">
						<text style="margin-left: 24rpx;"><text class="must-stars">*</text>缴费截止时间:</text>
						<text style="font-size: 26rpx;margin-left: 20rpx;">{{Ddatetime}}</text>
						<text style="position: absolute;left: 320rpx;color: #ff007f;">{{tips2}}</text>
					</view>
				</view>
				<!-- *********************************************** -->
				<view class="box-input aligncenter">
					<view v-if="types=='01'" class="domestic-Water-box">
						<view class="img-box aligncenter">
							<image src="/static/image/water@2x.png" mode="aspectFit"></image>
						</view>
						<view class="text-box">
							<text style="color: #109EF8;font-weight: bold;">生活用水</text>
							<view>
								<text>上次读数：</text>
								<text>{{BFN}}</text>
							</view>
							<view class="text-input-box">
								<text>本次读数：</text>
								<uni-easyinput type="number" v-model="degrees" :inputBorder="false"
									:placeholder="p_domesticWaterUnitPrice">
								</uni-easyinput>
							</view>
						</view>
					</view>
					<view v-if="types=='02'" class="solar-Water-box">
						<view class="img-box aligncenter">
							<image src="/static/image/water@2x.png" mode="aspectFit"></image>
						</view>
						<view class="text-box">
							<text style="color: #109EF8;font-weight: bold;">太阳能用水</text>
							<view>
								<text>上次读数：</text>
								<text>{{BFN}}</text>
							</view>
							<view class="text-input-box">
								<text>本次读数：</text>
								<uni-easyinput type="number" v-model="degrees" :inputBorder="false"
									:placeholder="p_solarWaterUnitPrice">
								</uni-easyinput>
							</view>
						</view>
					</view>
					<view v-if="types=='03'" class="ele-box">
						<view class="img-box aligncenter">
							<image src="/static/image/ele@2x.png" mode="aspectFit"></image>
						</view>
						<view class="text-box">
							<text style="color: #109EF8;font-weight: bold;">生活用电</text>
							<view>
								<text>上次读数：</text>
								<text>{{BFN}}</text>
							</view>
							<view class="text-input-box">
								<text>本次读数：</text>
								<uni-easyinput type="number" v-model="degrees" :inputBorder="false"
									:placeholder="p_eleUnitPrice">
								</uni-easyinput>
							</view>
						</view>
					</view>
					<view v-if="types=='04'" class="gas-box">
						<view class="img-box aligncenter">
							<image src="/static/image/gas@2x.png" mode="aspectFit"></image>
						</view>
						<view class="text-box">
							<text style="color: #109EF8;font-weight: bold;">燃气</text>
							<view>
								<text>上次读数：</text>
								<text>{{BFN}}</text>
							</view>
							<view class="text-input-box">
								<text>本次读数：</text>
								<uni-easyinput type="number" v-model="degrees" :inputBorder="false"
									:placeholder="p_gasUnitPrice">
								</uni-easyinput>
							</view>
						</view>
					</view>
					<view v-if="types=='05'" class="ele-box">
						<view class="img-box aligncenter">
							<image src="/static/image/bb@2x.png" mode="aspectFit"></image>
						</view>
						<view class="text-box">
							<text style="color: #109EF8;font-weight: bold;">宽带费用</text>
							<view>
								<text>上次读数：</text>
								<text>{{BFN}}</text>
							</view>
							<view class="text-input-box">
								<text>本次费用：</text>
								<uni-easyinput type="number" v-model="degrees" :inputBorder="false"
									:placeholder="p_broadbandFee">
								</uni-easyinput>
							</view>
						</view>
					</view>
				</view>
				<button form-type="submit" class="sub_button">下一步</button>
			</form>
			<input type="text" v-model="uNo" name="uniqueNo" style="display: none;" />
		</view>
		<s-popup v-model="bottomVisible" position="bottom" background="#fff" height="200">
			<view style="width: 100%;height: 200rpx; display: flex;justify-content: center;align-items: center;">
				<text style="color: #DD6161;">{{cname}}上月抄表为空,无法正常添加抄表费用,请联系系统运维人员进行处理</text>
			</view>
		</s-popup>

		</view>
	</s-page>
</template>

<script>
	import Dialog from '@/uni_modules/s-ui/utils/dialog';
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				errorTypes: '0',
				settlement: '',
				BFN: '', //上次读数
				showPicker: false,
				type: 'datetime',
				value: [{}],
				// 必填区------
				// 缴费截止时间
				Ddatetime: '选择日期',
				//抄表时间
				datetime: '',
				// 月度费用配置*********
				versions: [{
					text: "",
					value: "",
				}, ],
				configs: [],
				domesticWaterUnitPrice: '', //生活用水费用
				solarWaterUnitPrice: '', //太阳能用水费用
				eleUnitPrice: '', //电费单价
				gasUnitPrice: '', //燃气费单价
				broadbandFee: '', //宽带费
				//月度结束************

				// input提示框
				p_domesticWaterUnitPrice: '',
				p_solarWaterUnitPrice: '',
				p_eleUnitPrice: '',
				p_gasUnitPrice: '',
				p_broadbandFee: '',

				// 非空提示

				// 提示
				tips: '',
				tips1: '',
				tips2: '',

				degrees: '', //度数
				// Json标题
				//标题
				title: '',
				titleM: '',
				title: '',
				uNo: '',

				version: '',
				dTime: '截止时间',

				cname: '',

				bottomVisible: false, //底部弹出
				buttonSubShow: false, //下一步按钮
				dicDataList: [{
					text: "",
					value: "",
				}],
				types: '',
			}
		},
		onLoad(options) {
			console.log(options, 'options')
			console.log("options", options)
			this.uNo = options.uniqueNo
			this.cname = options.cname
			this.gettype()
			this.getNewDate() //加载当前时间方法
			this.getVersions()
			this.selTitle()
		},
		methods: {

			// 设置json数据标题
			selTitle() {
				this.title = this.titleM + this.uNo + "房月度费用"
				if (this.titleM == null) {
					let nullD = new Date()
					var NulldateTime = nullD.getFullYear() + '年' + (nullD.getMonth() + 1) + '月';
					this.titleM = NulldateTime
					this.title = this.titleM + this.uNo + "房月度费用"
					this.datetime = this.newDate
					console.log("selTitle检测到titleM为空")
				}
				// console.log(this.titleM)
				// console.log(this.title)
			},
			//获取类型
			async gettype() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-portal/dictionary/dicMeterType/datas',
						method: "get",
					})
				console.log("type:", res)
				if (res.success == true) {
					let inconfigs = res.body.dicDataList
					for (let i in inconfigs) {
						inconfigs[i].text = inconfigs[i].dataName;
						inconfigs[i].value = inconfigs[i].dataCode;
					}
					//把处理后的分类数组 赋值
					this.dicDataList = inconfigs
				}
				console.log(res)
				console.log(this.dicDataList)
			},

			submitR(e) {
				let mDate = new Date(this.datetime).getTime();
				let dDate = new Date(this.Ddatetime).getTime();
				this.getBefore()
				let pts = uni.getStorageSync('payTypes')
				let bfSt = uni.getStorageSync('bfSettlememt')
				console.log("bfSt", bfSt)
				console.log("提交判断", this.titleM, this.version, this.dTime)
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				console.log("时间：" + this.Ddatetime)
				if (this.titleM == null) {
					console.log("请填写完整")
				} else if (this.version === '' || this.version === null) {
					console.log("请填写完整")
					this.tips = '不允许为空!'
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
					console.log("dead" + this.dTime)
				} else if (this.Ddatetime == '选择日期' || this.Ddatetime == '') {
					// } else if (this.Ddatetime === null||this.Ddatetime === "") {
					console.log("请填写完整")
					this.tips2 = '不允许为空!'
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				} else if (mDate > dDate) {
					this.tips1 = '抄表时间不允许大于截止时间!'
				} else if (pts == "01" && this.errorTypes == '1') {
					console.log("生活", this.errorTypes)
					uni.showToast({
						title: '该房间暂未使用生活用水类型的电表，请重新选择！',
						icon: 'none'
					})
				} else if (pts == "02" && this.errorTypes == '2') {
					uni.showToast({
						title: '该房间暂未使用太阳能用水类型的电表，请重新选择！',
						icon: 'none'
					})
				} else if (pts == "03" && this.errorTypes == '3') {
					uni.showToast({
						title: '该房间暂未使用电表类型的电表，请重新选择！',
						icon: 'none'
					})
				} else if (pts == "04" && this.errorTypes == '4') {
					uni.showToast({
						title: '该房间暂未使用燃气表类型的电表，请重新选择！',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						// uni.redirectTo({
						url: "/pages/meterCheck/SubmitReadingPage/SubmitReadingPage?degrees=" +
							this.degrees +
							"&uniqueNo=" + this.uNo + "&version=" + this.version +
							"&meterReadingTime=" + this.rTime + "&deadline=" +
							this.dTime + "&title=" + this.title + "&titleM=" + this.titleM + "&types=" + this
							.types + "&BFN=" + this.BFN
					})
				}
			},
			// 月度费用配置/*******************
			onchange(e) {
				this.tips = ''
				const value = e.detail.value
				console.log("已选择=" + value[0].version)
				this.version = value[0].version
				this.domesticWaterUnitPrice = value[0].domesticWaterUnitPrice
				this.p_domesticWaterUnitPrice = "(单价：" + this.domesticWaterUnitPrice + "元/立方米)"

				this.solarWaterUnitPrice = value[0].solarWaterUnitPrice
				this.p_solarWaterUnitPrice = "(单价：" + this.solarWaterUnitPrice + "元/立方米)"

				this.eleUnitPrice = value[0].eleUnitPrice
				this.p_eleUnitPrice = "(单价：" + this.eleUnitPrice + "元/度)"

				this.gasUnitPrice = value[0].gasUnitPrice
				this.p_gasUnitPrice = "(单价：" + this.gasUnitPrice + "元/立方米)"

				this.broadbandFee = value[0].broadbandFee
				this.p_broadbandFee = "(单价：" + this.broadbandFee + "元/月)"

				this.getBefore();
			},
			onchanges(e) {
				console.log("e:", e)
				this.types = e.detail.value[0].dataCode
				// console.log("options.uniqueNo:",options.uniqueNo)
				// console.log("this.types:",this.types)
				// console.log("this.uNo:",this.uNo)
				this.getBefore();
				// console.log("options.types",options)
			},
			async getBefore() {
				console.log("options.uniqueNo:", this.uNo)
				console.log("this.types:", this.types)
				uni.setStorageSync("payTypes", this.types)
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-operate/settlement/uniqueNo/' + this.uNo + '/type/' + this.types,
						method: "get",
					})
				console.log("res.body.settlement:", res.body.settlement)
				if (res.body.settlement == null) {
					this.BFN = "无"
					uni.setStorageSync('bfSettlememt', res.body.settlement)
					console.log("types", uni.getStorageSync('payTypes'))
					let ptps = uni.getStorageSync('payTypes')
					if (ptps == '01') {
						this.errorTypes = '1'
					} else if (ptps == '02') {
						this.errorTypes = '2'
					} else if (ptps == '03') {
						this.errorTypes = '3'
					} else if (ptps == '04') {
						this.errorTypes = '4'
					}
				}
				if (res.success == true) {
					if (res.body.settlement.presentNum == null && res.body.settlement != null) {
						this.BFN = "无"
					} else {
						this.BFN = res.body.settlement.presentNum
					}
					// this.getVersion(options)
					console.log("上次读数：", this.BFN)
				}
			},

			onnodeclick(node) {},
			// 月度费用配置结束/*******************
			// 时间选择
			DatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			ed(e) { //选择
				this.showPicker = false;

				if (e) {
					this[this.type] = e.value;
					// console.log(this.datetime,this.Ddatetime)

					let d = e.date
					var AdateTime = d.getFullYear() + '年' + (d.getMonth() + 1) + '月';
					// this.titleM = ''
					this.titleM = AdateTime
					this.tips2 = ''
				}
				this.titleM = AdateTime
				this.rTime = this.datetime
				this.dTime = this.Ddatetime

				this.selTitle()

			},
			// 时间选择结束

			//获取当前时间并修改时间
			getNewDate() { //获取当前时间并打印
				var yy = new Date().getFullYear();
				// var mm = new Date().getMonth() + 1;
				var mm = new Date().getMonth() + 1 < 10 ? '0' + Number(new Date().getMonth() + 1) : new Date()
					.getMonth() +
					1;
				var dd = new Date().getDate();
				let hh = new Date().getHours();
				let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date()
					.getMinutes();
				let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date()
					.getSeconds();
				let d = new Date()
				var BdateTime = d.getFullYear() + '年' + (d.getMonth() + 1) + '月';
				this.newDate = yy + '-' + mm + '-' + dd + " " + hh + ":" + mf + ":" + ss;
				this.cnDate = yy + '年' + mm + '月';
				this.date = this.newDate
				this.rTime = this.newDate
				this.datetime = this.newDate
				this.titleM = BdateTime
			},
			// 获取月度费用配置
			async getVersions() {
				const res = await this
					.$myRequest({
						url: '/api-operate/config',
						method: 'get',
					})
				this.configs = res.body.configs.data


				let inconfigs = res.body.configs.data
				//第一步 【改数组】 处理分类数据
				for (let i in inconfigs) {
					if (inconfigs[i].id) {
						//把字段的 房屋名称【version】 改名为text
						inconfigs[i].text = inconfigs[i].version;
						//把数组的 version字段改名为value
						inconfigs[i].value = inconfigs[i].version;
					}
				}
				//把处理后的分类数组 赋值
				this.versions = inconfigs;
			},
		}
	}
</script>

<style>
	.room-title {
		font-size: 32rpx;
		color: #6d6e6e;
		font-weight: bold;
		margin: 44rpx 0 28rpx 28rpx;
	}

	.must-input {
		margin-bottom: 20rpx;
		box-shadow: #C5C7CC 2rpx 2rpx;
		font-size: 24rpx;
	}

	.aligncenter {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.must-stars {
		color: #ff0000;
	}

	.version-box,
	.meter-month,
	.meter-deadline {
		display: flex;
		align-items: center;
		width: 100%;
		height: 76rpx;
		background-color: #FFFFFF;
		position: relative;
		/* border: #007AFF 1px solid; */
	}

	.meter-month::after {
		content: " ";
		margin: 0 auto;
		background-color: #808080;
		width: 706rpx;
		height: 2rpx;
		position: absolute;
		transform: scale(1, 0.2);
		bottom: 0;
		left: 0%;
		right: 0%;
	}

	.meter-month::before {
		content: " ";
		background-color: #808080;
		width: 706rpx;
		height: 2rpx;
		position: absolute;
		transform: scale(1, 0.2);
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	#version-picker {
		/* height: 76rpx; */
		/* overflow: hidden; */
	}

	.box-input {
		display: flex;
		flex-direction: column;
	}

	.box-input .domestic-Water-box,
	.solar-Water-box,
	.ele-box,
	.gas-box,
	.bb-box {
		width: 361px;
		height: 90px;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		align-items: center;

		margin-bottom: 26rpx;

		box-shadow: #C5C7CC 2rpx 2rpx;
	}

	.img-box {
		width: 144rpx;
		height: 102rpx;
		border-right: #DFDFDF 2rpx solid;
		margin-right: 32rpx;
	}

	.img-box image {
		width: 76rpx;
		height: 76rpx;
	}

	.text-input-box {
		display: flex;
		align-items: center;
	}
</style>
